<template>
  <div class="tx">
    <div class="left">
      <img
        src="https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
      <h3>欢迎您张小丽</h3>
      <p>某主任</p>
      <div class="detail">数据来源</div>
      <!-- <div :style="{ width: '200px', height: '200px' }" id="myChart5"></div> -->
      <ul class="ullist">
        <li><span>所属学院</span><span>23</span></li>
        <li><span>所属专业</span><span>23</span></li>
        <li><span>选课数量</span><span>23</span></li>
        <li><span>综合排名</span><span>23</span></li>
        <li><span>专业排名</span><span>23</span></li>
      </ul>
    </div>
    <div class="right">
      <div style="margin-top: 70px">
        <b>学年</b
        ><select>
          <option selected="selected">全部</option>
          <option>2015年-2016年</option>
          <option>2016年-2017年</option>
          <option>2017年-2018年</option>
        </select>
      </div>

      <div class="contentbox">
        <div>
          <div>
            <h3>课程成绩</h3>
            <b>学年</b
            ><select>
              <option selected="selected">全部</option>
              <option>2015年-2016年</option>
              <option>2016年-2017年</option>
              <option>2017年-2018年</option>
            </select>
          </div>
          <div id="myChart1"></div>
        </div>
        <div>
          <h3>专业课程排名及成绩</h3>

          <div id="myChart2"></div>
        </div>
        <div>
          <div>
            <h3>公共课程</h3>
            <b>学年</b
            ><select>
              <option selected="selected">全部</option>
              <option>2015年-2016年</option>
              <option>2016年-2017年</option>
              <option>2017年-2018年</option>
            </select>
          </div>
          <div id="myChart3"></div>
        </div>
        <div>
          <div>
            <h3>专业课程</h3>
            <b>学年</b
            ><select>
              <option selected="selected">全部</option>
              <option>2015年-2016年</option>
              <option>2016年-2017年</option>
              <option>2017年-2018年</option>
            </select>
          </div>
          <div id="myChart4"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例

      //---2
      const myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      myChart2.setOption({
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 26, name: "rose 6" },
              { value: 22, name: "rose 7" },
              { value: 18, name: "rose 8" },
            ],
          },
        ],
      });
      //上
      const myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      myChart1.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: "#a90000",
                },
              },
              150,
              80,
              70,
              110,
              130,
            ],
            type: "bar",
          },
        ],
      });

      //3
      const myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      myChart3.setOption({
        xAxis: {
          data: ["Animals", "Fruits", "Cars"],
        },
        yAxis: {},
        dataGroupId: "",
        animationDurationUpdate: 500,
        series: {
          type: "bar",
          id: "sales",
          data: [
            {
              value: 5,
              groupId: "animals",
            },
            {
              value: 2,
              groupId: "fruits",
            },
            {
              value: 4,
              groupId: "cars",
            },
          ],
          universalTransition: {
            enabled: true,
            divideShape: "clone",
          },
        },
      });
      //
      //
      const categories = (function () {
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
          now = new Date(+now - 2000);
        }
        return res;
      })();
      const categories2 = (function () {
        let res = [];
        let len = 10;
        while (len--) {
          res.push(10 - len - 1);
        }
        return res;
      })();
      const data = (function () {
        let res = [];
        let len = 10;
        while (len--) {
          res.push(Math.round(Math.random() * 1000));
        }
        return res;
      })();
      const data2 = (function () {
        let res = [];
        let len = 0;
        while (len < 10) {
          res.push(+(Math.random() * 10 + 5).toFixed(1));
          len++;
        }
        return res;
      })();
      const myChart4 = this.$echarts.init(document.getElementById("myChart4"));
      myChart4.setOption({
        title: {
          text: "Dynamic Data",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: categories,
          },
          {
            type: "category",
            boundaryGap: true,
            data: categories2,
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "Price",
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
          {
            type: "value",
            scale: true,
            name: "Order",
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: "Dynamic Bar",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data,
          },
          {
            name: "Dynamic Line",
            type: "line",
            data: data2,
          },
        ],
      });
      app.count = 11;
      setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");
        data.shift();
        data.push(Math.round(Math.random() * 1000));
        data2.shift();
        data2.push(+(Math.random() * 10 + 5).toFixed(1));
        categories.shift();
        categories.push(axisData);
        categories2.shift();
        categories2.push(app.count++);
        myChart.setOption({
          xAxis: [
            {
              data: categories,
            },
            {
              data: categories2,
            },
          ],
          series: [
            {
              data: data,
            },
            {
              data: data2,
            },
          ],
        });
      }, 2100);

      //
      //5
      const myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      myChart5.setOption({
        dataset: {
          source: [
            ["score", "amount", "product"],
            [89.3, 58212, "Matcha Latte"],
            [57.1, 78254, "Milk Tea"],
            [74.4, 41032, "Cheese Cocoa"],
            [50.1, 12755, "Cheese Brownie"],
            [89.7, 20145, "Matcha Cocoa"],
            [68.1, 79146, "Tea"],
            [19.6, 91852, "Orange Juice"],
            [10.6, 101852, "Lemon Juice"],
            [32.7, 20112, "Walnut Brownie"],
          ],
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"],
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      });
      //
    },
  },
};
</script>
<style lang="scss">
.tx {
  background: linear-gradient(top left, #0094d6, #1f67af);
  display: flex;
}
.left {
  min-width: 200px !important;
  border-right: 1px solid #000;
  box-sizing: content-box;
}
.left img {
  position: relative;
  display: block;
  margin: 60px 0 0 20px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  box-shadow: 3px 3px 3px #666;
  border: 3px solid #111;
}
.left h3,
p {
  text-align: center;
}
.left .detail {
  background-color: #013358;
  height: 30px;
  line-height: 30px;
  padding-left: 2px;
}
.left .ullist {
  text-align: left;
  padding: 3px;
  margin-left: 0;
  list-style: none;
}
.left .ullist li {
  display: flex;
  justify-content: space-between;
  height: 30px;
}
.left .ullist li:nth-child(1) {
  border-bottom: 2px solid #c45955;
}
.left .ullist li:nth-child(2) {
  border-bottom: 3px solid #64bfe9;
}
.left .ullist li:nth-child(3) {
  border-bottom: 3px solid #d7a959;
}
.left .ullist li:nth-child(4) {
  border-bottom: 4px solid #47a26b;
}
.left .ullist li:nth-child(5) {
  border-bottom: 5px solid #61a0a8;
}
.left .ullist li span:nth-child(1) {
  display: inline-block;
  padding-left: 2px;
}
.left .ullist li span:nth-child(2) {
  display: inline-block;
  padding-right: 3px;
}
.contentbox {
  display: flex;
  flex-wrap: wrap;
}
.contentbox > div div:nth-child(1) {
  width: 100%;
  height: 60px;
}
.contentbox > div div:nth-child(2) {
  width: 550px;
  height: 340px;
}
#myChart2 {
  transform: scale(0.5);
}
</style>
